$(function () {
    // 功能1: 历史记录渲染功能
    renderHis();
    function renderHis() {
        //  读取本地历史, 得到 jsonStr
        //  将 jsonStr 转换成 数组
        var arr = JSON.parse(localStorage.getItem('search')) || [];
        // - li标签的长度不能超过10个
        console.log(arr.length);
        // - 判断数组长度是否大于10
        if (arr.length > 10) {
            // - 删除数组中最后一个元素
            arr.splice(10, arr.length - 10);
        }

        //  通过数组, 进行页面渲染(模板引擎)
        $('.lt-history').html(template('tmp-search', { arr: arr }));
    }


    // 功能2: 清空历史记录功能
    // - (1) 通过事件委托给清空记录绑定点击事件
    $('.lt-history').on('click', '.btn-empty', function () {
        // - (2) 清空, 将本地的 搜索历史移除, removeItem(key);
        localStorage.removeItem('search');//返回null
        // - (3) 重新渲染页面
        renderHis();

    });

    //  功能3: 删除单条历史记录
    // - 注册事件委托,给btn-delete绑定点击事件
    $('.lt-history').on('click', '.btn_delete', function () {

        // - 获取本地存储中的历史记录(并转换为数组)
        var arr = JSON.parse(localStorage.getItem('search'));
        // - 获取当前点击元素对应数据
        var data = $(this).prev().text();

        // - 根据该数据删除数组中对应的元素
        arr.splice(arr.indexOf(data), 1);

        // - 将数组重新保存在localstroge中
        localStorage.setItem('search', JSON.stringify(arr));
        // - 重新渲染数据
        renderHis();

    });

    // 功能4: 点击搜索按钮, 添加搜索记录
  
    // - 给搜索按钮注册点击事件
    $('#btn_search').on('click', function () {
        
        search();
        //清空搜索框中数据
        $('#search').val('');
        // - 重新渲染
        renderHis()
        // - 跳转到searchList.html页面
        location.href = "searchList.html?key=" + txt;

    });
    // 需求5 敲回车触发搜索按钮注册点击事件
    $(document).on('keydown', function (e) {
        if (e.keyCode == 13) {
            $('#btn_search').trigger('click');
        }
    });


});

